<template>
	<view class="content">
		<u-bar-height></u-bar-height>
		<uni-card :isFull="true" class="list_box" v-for="(item, index) in songList" :key="index" @tap="jumpPlayList(item.id)">
			<view class="list_box_left">
				<image :src="item.coverImgUrl" mode=""></image>
			</view>
			<view class="list_box_right">
				<view class="song_name" v-for="item in item.song" :key="index">{{item.songName}}</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
	import {playList} from '@/API/API.js';
	import util from '@/utils/util.js';
	export default {
		data(){
			return{
				listID: [19723756, 3778678, 2884035, 7657858751, 6723173524, 991319590, 5059642708, 5338990334, 5059661515, 5059644681, 745956260, 2809513713],
				listArr: [],
				songList: []
			}
		},
		
		onLoad(){
			this.list();
		},
		
		methods: {
			list(){
				let listArr = [];
				for(let i = 0; i < this.listID.length; i++){
					playList({id: this.listID[i]}).then(data => {
						let listObj = {};
						listObj['id'] = this.listID[i];
						listObj['coverImgUrl'] = data.playlist.coverImgUrl;
						
						let itemArr = [];
						for(let j = 0; j < 3; j++){
							let itemObj = {};
							itemObj['songName'] = (j+1) +'. '+ data.playlist.tracks[j].name;
							itemArr.push(itemObj);
						}
						
						listObj['song'] = itemArr;
						listArr.push(listObj);
						
						if(i == 11){
							setTimeout(() => {
								this.songList = listArr;
							}, 300);
						}

					});
				}
			},
			
			jumpPlayList(id){
				util.jump('navigateTo', '/pages/list/playList?id=' + id);
			}
		},
	}
</script>

<style>
	.list_box{
		width: 100%;
	}
	
	/deep/.uni-card__content{
		display: flex;
		align-items: center;
	}
	
	.list_box .list_box_left{
		width: 24%;
		height: 80px;
		margin-right: 4%;
	}
	
	.list_box .list_box_left image{
		width: 100%;
		height: 100%;
	}
	
	.list_box .list_box_right{
		width: 70%;
		font-size: 13px;
	}
	
	.list_box .list_box_right .song_name{
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>